<template>
  <div style="margin: 10px 10px;">
    <el-card style="height: 640px; display: inline-block; width: 100%;">
      <!-- 菜单栏 -->
      <div class="top-tool-bar">
        <div style="float: left;">
          <span style="display: inline-block; width: 100px; font-weight: bold;">日期过滤</span>
          <el-date-picker
            v-model="date"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </div>
      </div>
      <!-- 表格 -->
      <div class="data-table">
        <el-table height="500" stripe highlight-current-row v-loading="table.loading" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading" :data="deprList">
          <el-table-column label="资产编号" prop="assetId" min-width="100"></el-table-column>
          <el-table-column label="资产名称" prop="asset.name" min-width="100"></el-table-column>
          <el-table-column label="折旧日期" prop="deprDate" min-width="100"></el-table-column>
          <el-table-column label="折旧金额/元" prop="deprAmount" min-width="100" :formatter="r => $numeral(r.deprAmount).format('0,0.00')"></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="bottom-page">
        <el-pagination :disabled="false" background @size-change="val => this.pagination.pageSize = val"
          @current-change="val => this.pagination.currentPage = val" :current-page="pagination.currentPage" :page-sizes="pagination.pageSizes"
          :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as depr from '@/api/depreciation'
import * as common from '@/common'

export default {
  name: 'DepreciationInfo',
  data () {
    return {
      date: {},
      deprList: [],
      table: {
        status: 0,
        loading: false
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20]
      }
    }
  },
  watch: {
    date: function () {
      this.selectByPage()
    },
    pagination: {
      handler: function () {
        this.selectByPage()
      },
      deep: true
    }
  },
  created () {
    this.selectByPage()
  },
  methods: {
    selectByPage () {
      let params = {
        page: this.pagination.currentPage,
        rows: this.pagination.pageSize
      }

      if (JSON.stringify(this.date) !== '{}') {
        params.date = common.dateFormat('yyyy-MM-dd', this.date)
      }
      depr.selectByPage(params).then(resp => {
        this.pagination.total = resp.data.total
        this.deprList = resp.data.data
      }).catch(_ => {
        this.$notify.error('请求超时')
      })
    }
  }
}
</script>

<style scoped>
  .top-tool-bar {
    height: 56px;
  }

  .data-table {
    border: 1px gainsboro solid;
  }

  .bottom-page {
    height: 100%;
    margin: 10px auto;
  }
</style>
